/** @file Toolbar.qml
@brief The Qt-Complex Standard toolbar

The standard Qt-Complex toolbar has three buttons: Home (to show anything),
Map (opens map navigation) and Info (any kind of information. The elements can be changed
without difficult and the button associations too.

The same model should be used to build a dynamic toolbar with variable number of buttons.

@authorname \n
@licenseversion \n
@actualversion - @dateupdate

@licensenote
*/

import QtQuick 1.0
import "Theme.js" as JObj

Item {
    id: toolbar

    focus:true
    width: objLoad.getWidth(); height: objLoad.getHeight();

    function tb_btnKern() { return Math.round(toolbar.width / 3) + objLoad.getFieldSpacing(); }
    function tb_buttonWidth() { return Math.round(toolbar.width / 3) - (objLoad.getFieldSpacing() * 2); }
    function tb_TextOffset() { return Math.round(toolbar.width / 3 * 0.3); }

    signal button1Clicked; signal button2Clicked; signal button3Clicked
    // The background image covers all the toolbar buttons lenght
    BorderImage {
        id: toolbarBackground
        width: objLoad.getWidth(); height: objLoad.getFieldHeight() + objLoad.getFieldSpacing();
        source: JObj.getTbar(objLoad.getTheme());
        border { left: 10; top: 10; right: 10; bottom: 10 }
        clip: true; smooth: true
    }
    // Definition of the position marker object showing the current selected button
    Image {
        id: positionMarker

        source: JObj.getActiveMenuIcon(objLoad.getTheme());
        anchors.top: toolbarBackground.bottom
        state: "btn1"

        states: [
            State { name: "null"
                AnchorChanges { target: positionMarker; anchors.right: toolbarBackground.left } },
            State { name: "btn1"
                AnchorChanges { target: positionMarker; anchors.left: toolbarBackground.left } },
            State { name: "btn2"
                AnchorChanges { target: positionMarker; anchors.horizontalCenter: toolbarBackground.horizontalCenter } },
            State { name: "btn3"
                AnchorChanges { target: positionMarker; anchors.right: toolbarBackground.right } }
        ]
        // All transitions are managed with the same effect so wildcards are used.
        transitions:
            Transition { from:  "*"; to: "*"
                AnchorAnimation { easing.type: Easing.OutQuad; duration: 500; }
            }
    }

    SubLoader {
        id: button1 // Home

        theme: objLoad.getTheme(); obj: "ButtonToolbar";
        height: parent.height
        width: toolbar.tb_buttonWidth()
        fontPoints: objLoad.getFontPoints();
        fieldSpacing: objLoad.getFieldSpacing();
        transform: Translate { x: objLoad.getFieldSpacing() }
        obj_string: JObj.tb_home;
        obj_icon: JObj.getTbarHome(objLoad.getTheme());
        onClicked: { toolbar.button1Clicked(); positionMarker.state = "btn1"; }
        focus:true
    }

    SubLoader {
        id: button2

        theme: objLoad.getTheme(); obj: "ButtonToolbar";
        height: parent.height
        width: toolbar.tb_buttonWidth()
        transform: Translate { x: toolbar.tb_btnKern() }
        obj_string: JObj.tb_map;
        obj_icon: JObj.getTbarMap(objLoad.getTheme());
        onClicked: { toolbar.button2Clicked();  positionMarker.state = "btn2"; }
        focus:true
    }

    SubLoader {
        id: button3

        theme: objLoad.getTheme(); obj: "ButtonToolbar";
        height: parent.height
        width: toolbar.tb_buttonWidth()
        transform: Translate { x: toolbar.tb_btnKern() * 2 }
        obj_string: JObj.tb_info;
        obj_icon: JObj.getTbarInfo(objLoad.getTheme());
        onClicked: { toolbar.button3Clicked();  positionMarker.state = "btn3"; }
        focus:true
    }
}
